<template>
    <div>
        <cuSearch v-if="isSearch" @setSearch='setSearch' :isFocus="true"/>
        <div class="tab_home" id="app" ref="backtop" v-else>
            <form action="/">
                <van-search
                        placeholder="请输入搜索关键词"
                        v-model="searchValue"
                        @click="onSearch"
                />
            </form>
<!--            <van-tabs animated color="#E86489" swipeable sticky>-->
            <van-tabs animated color="#E86489" sticky>
                <van-tab title="首页">
                    <index></index>
                </van-tab>
                <!-- 男生 -->
                <van-tab title="男生">
                    <boy></boy>
                </van-tab>
                <van-tab title="女生">
                    <girl></girl>
                </van-tab>
                <van-tab title="球鞋">
                    <shoes></shoes>
                </van-tab>
                <van-tab title="美妆">
                    <beauty></beauty>
                </van-tab>
                <van-tab title="珠宝">
                    <xxgl></xxgl>
                </van-tab>
                <van-tab title="设计师">
                    <designer></designer>
                </van-tab>
                <van-tab title="直播">
                    <xxgl></xxgl>
                </van-tab>
                <!-- 回到顶部 -->

            </van-tabs>
            <div class="gotop" @click="backTop" v-show="showTop" :class="topanimate">
                <van-icon name="arrow-up" color="#000" class="gotopicon"/>
            </div>

        </div>
    </div>
</template>

<script>
    import {getHome, goodsCategory, SearchForHome, goodsDetail, adList, adPositionList} from '@/api/api';
    import scrollFixed from '@/mixin/scroll-fixed';
    //珠宝
    import jewelry from './jewelry.vue'
    //形象管理
    import xxgl from './no-data.vue'
    //搜索
    import cuSearch from '@/views/items/search'
    import index from './components/index'
    import boy from './components/boy'
    import girl from './components/girl.vue'
    import designer from './components/designer.vue'
    import beauty from './components/beauty.vue'
    import shoes from './components/shoes.vue'

    import {
        Swipe,
        SwipeItem,
        Search,
        Row,
        Col
    } from 'vant';

    export default {
        mixins: [scrollFixed],
        components: {
            [Row.name]:
            Row,
            [Col.name]:
            Col,
            [Search.name]:
            Search,
            [Swipe.name]:
            Swipe,
            [SwipeItem.name]:
            SwipeItem,
            jewelry,
            xxgl,
            cuSearch,
            beauty,
            index,
            boy,
            girl,
            designer,
            shoes
        },

        data() {
            return {
                goodsList: [],
                topanimate: '',
                searchValue: '',
                isSearch: false,
            };
        },

        computed: {
            showTop: function () {
                let value = this.scrollTop > 200 ? true : false;
                this.topanimate = 'animated fadeInDown'
                return value;
            },
        },
        methods: {
            setSearch(e) {
                this.isSearch = e
            },
            backTop() {
                this.$refs.backtop.scrollTo(0, 0) //点击浏览器后退按钮，回到页面后会吧滚动条滚动到0px位置
            },

            onLoad() {

            },

            changeTabbar(o) {
                goodsCategory({id: o.id}).then(res => {
                    let categoryId = res.data.data.currentCategory.id;
                    this.$router.push({
                        name: 'category',
                        query: {itemClass: categoryId}
                    });
                });
            },
            onSearch() {
                this.isSearch = true
                // if (this.searchValue != '') {
                //     this.$router.push({
                //         name: 'search',
                //         query:{
                //             words:this.searchValue
                //         }
                //     })
                //     // SearchForHome({
                //     //     words: this.searchValue
                //     // }).then(res => {
                //     //     console.log(res)
                //     // })
                //     // .catch((error) => {
                //     //     Toast(error.data.errMsg)
                //     // });
                // } else {
                //     Toast('123123')
                // }
            }
        }
    }
</script>


<style lang="scss" scoped>
    .gotop {
        width: 50px;
        height: 50px;
        position: fixed;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.7);
        border: 1px solid #999999;
        bottom: 80px;
        right: 10px;
        text-align: center;
    }

    .gotopicon {
        line-height: 50px;
        font-size: 40px;
    }

</style>
